<template>
    <el-container class="applet">
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="cms-search-group">
                        <el-button style="float: left" type="primary" @click="getListData()" icon="fa fa-refresh" size="small"> 刷新</el-button>
                        <div class="cms-search-item">
                            <el-button icon="el-icon-search" size="medium" @click="getListData()"></el-button>
                        </div>
                        <div class="cms-search-item">
                            <el-date-picker size="medium"
                                            style="margin-left: 10px"
                                            v-model="params.date"
                                            type="date"
                                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <el-table v-loading="loading"
                              element-loading-text="努力加载中..."
                              element-loading-spinner="el-icon-loading"
                              tooltip-effect="dark" :data="listData" border>
                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                        <el-table-column prop="total_nums" label="回流用户总数(不去重)"></el-table-column>
                        <el-table-column prop="touch_nums" label="触发用户数(按小时去重)"></el-table-column>
                        <el-table-column prop="user_nums" label="回流用户数(按天去重)"></el-table-column>
                    </el-table>
                    <v-chart  style="clear: both;padding-top:15px" v-loading="loading"
                              element-loading-text="努力加载中..."
                              element-loading-spinner="el-icon-loading"
                              tooltip-effect="dark" :options="option"/>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {AppletListAll, AppletCountShare} from '@/utils/request';
    import vChart from 'vue-echarts'
    import 'echarts'
    export default {
        components: {vChart},
        data () {
            return {
                appletList: [],
                listData:[],
                params: {
                    applet: this.$storage.get('count_applet_active'),
                    date: ''
                },
                option : {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:[]
                    },
                    grid: {
                        left: '0%',
                        right: '1%',
                        bottom: '0%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                    },
                    yAxis: {
                        type: 'value',
                        scale: true
                    },
                    series: [

                    ]
                }
            }
        },
        activated() {
            this.$store.dispatch('setAppletCountActive', '/appletcount/shares');
            this.getCurrentDate();
            this.getListData();
        },
        computed: {
            ...mapGetters(['active', 'loading']),
        },
        mounted(){
            this.$bus.$on('changList',()=>{
                this.params.applet = this.$storage.get('count_applet_active');
                this.getListData();
            });
        },
        methods: {
            getListData() {
                if (this.params.date) {
                    this.params.date = this.moment(this.params.date).format('YYYY-MM-DD');
                }
                this.$store.dispatch('setLoading', true);
                AppletCountShare({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = [res.data.count];
                        for (let i = 0; i < res.data.length; i++) {
                            this.option.legend.data.push(res.data[i].name)
                        }
                        this.option.series = res.data.list;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            getCurrentDate() {
                let myDate = new Date();
                let month = myDate.getMonth() + 1;
                let strDate = myDate.getDate();

                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }

                this.params.date = myDate.getFullYear() + '-' + month + '-' + strDate;
            }
        }
    }
</script>
<style scoped>
    .echarts {
        width: 100%;
        height: 650px;
    }
</style>

